import { Card, Col, Row, List } from "antd";
import axios from "axios";
import { PageHeader } from "@ant-design/pro-layout";
import React, { useEffect, useState } from "react";
import _ from "lodash";
export default function News() {
  const [list, setList] = useState([]);
  // 请求数据
  useEffect(() => {
    axios.get("/news?publishState=2&_expand=category").then((res) => {
      setList(
        // 也要使用lodash进行分类排序
        // Object.entries会将对象转为二维数组
        Object.entries(_.groupBy(res.data, (item) => item.category.label))
      );
      // console.log( Object.entries(_.groupBy(res.data, (item) => item.category.label)));
    });
  }, []);
  return (
    <div style={{ width: "95%", margin: "0 auto" }}>
      <PageHeader class="" subTitle="查看新闻" title="全球大新闻"></PageHeader>
      <div className="site-card-wrapper">
        {/*gutter控制cart左右间据 */}
        <Row gutter={[16, 16]}>
          {list.map((item) => (
            <Col span={8} key={item[0]}>
              <Card title={item[0]} hoverable>
                <List
                  size="large"
                  bordered
                  dataSource={item[1]}
                  pagination={{ pageSize: 3 }} //分页器当前显示的条数
                  renderItem={(item) => (
                    // 列表
                    <List.Item>
                      <a href={`/detail/${item.id}`}>
                        {item.label || item.title}
                      </a>
                    </List.Item>
                  )}
                />
              </Card>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
}
